<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card">
      <div class="top">
        <div>
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div>
          <el-button>重置</el-button>
          <el-button type="primary" @click="searchfn">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <span>账号/姓名: </span>
        <input type="text" v-model="keyword" placeholder="请输入账号、姓名">
      </div>
    </el-card>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
        <el-table-column align="center" prop="id" label="编号"></el-table-column>
        <el-table-column align="center" prop="name" label="角色名称"></el-table-column>
        <el-table-column align="center" prop="description" label="描述"></el-table-column>
        <el-table-column align="center" prop="sort" label="用户数"></el-table-column>
        <el-table-column align="center" prop="createTime" label="添加时间"></el-table-column>
        <el-table-column align="center" prop="status" label="是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
              @change="switchfn(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default>
            <div class="edit">
              <el-button size="small" text type='primary' @click="edit">编辑</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination v-model:currentPage="paginate.currentPage" v-model:page-size="paginate.pageSize"
        :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total"
        background @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { reactive, Ref, ref, toRefs } from 'vue';
import UserDailog from './UserDailog.vue';
import * as http from "@/request/api"
import { useTable } from '@/hook/table'
import EventBus from '@/utils/index'


let keyword = ref('')
let { list, paginate, switchfn, searchfn, handleSizeChange, handleCurrentChange } = useTable(http.admin.RoleList, { keyword: keyword.value })

function edit() {
  EventBus.emit('showEdit', {})
}
</script>
  
<style>
.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.box-card .bottom {
  margin: 20px;
  color: gray;
}

.box-card .bottom input {
  border: 1px solid rgb(218, 216, 216);
  height: 26px;
  border-radius: 5px;
  margin-left: 8px;
  padding-left: 5px;
  color: rgb(201, 191, 191);
  font-size: 12px;
  outline-color: rgb(179, 175, 175);
}


.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}
</style>